回到最初，自己學pattern看的第一篇文章

<文章列表>
IT人生組文章
--9/26 : IT人的三個心理素質
http://ithelp.ithome.com.tw/question/10130061
--9/25 : 瀏覽衝量十法(完)
http://ithelp.ithome.com.tw/question/10129651
--9/24 : 連鎖效應後的反思 - 瀏覽衝量十法
http://ithelp.ithome.com.tw/question/10129219
--9/23 : 半澤直樹 - 連鎖效應後的反思
http://ithelp.ithome.com.tw/question/10128966
--9/23 : 推薦大家看半澤直樹
http://ithelp.ithome.com.tw/question/10128756
--9/22 : 不要在電梯裡面討論HTML
http://ithelp.ithome.com.tw/question/10128407

開發技術組文章
--9/26 : jQuery套件開發之(十一)，plugin pattern
http://ithelp.ithome.com.tw/question/10130076
--9/25 : jQuery套件開發(十)，element放入DOM相關速度測試。
http://ithelp.ithome.com.tw/question/10129658
--9/24 : jQuery套件開發(九)，了解reflow的概念
http://ithelp.ithome.com.tw/question/10129232
--9/23 : jQuery套件開發(八)，怎麼樣把element 放進DOM中才好呢。
http://ithelp.ithome.com.tw/question/10128771
--9/22 : jQuery套件開發(七)，實作套件。
http://ithelp.ithome.com.tw/question/10128406

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
漫漫長路

不知不覺也來到了第十一天

今天，要來介紹的是

我在學寫套件之中，覺得滿重要的一篇文章

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

我們直接來了解一下它們這樣寫的用意

也請大大們指點一二

/*
這裡的; 其實真的很假會
大抵只是怕上一段程式沒有分號，會影導下面寫的東西
*/
;(function ( $, window, document, undefined ) {
    
    /*
    window document 被傳進來當作區域變數
    會稍稍加快運算
    */
    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._name = pluginName;
        
        this.init();
    }

    Plugin.prototype.init = function () {
        //程式，寫這邊~
    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }
})( jQuery, window, document );

這篇文章，基本上算是我寫套件的啟蒙

尤其是最後這一段

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

首先我想聲明的是

pattern沒有萬用的，只有適不適合

在越來越了解套件之後，我才發現

這個pattern比較適合widget類的套件

甚麼意思?就是會出現一些輔助使用者、與使用者互動的元素的

這一類都算是widget類的套件。

我貼的這個，基本上只適用一個元素觸發一個widget的狀況下。

一個元素進行多次觸發

$(selector).plugin() ; //第一次
$(selector).plugin() ; //第二次

這一個pattern都是不太適合的。

此外，這一個pattern有另一個問題

就是我無法使用$(selector).plugin('method') ;

而這是一個很常見的操作

需要稍微變更一下

$.fn[pluginName] = function() {
    //處裡套件全域設定       
    args = Array.prototype.slice.call(arguments) ;
    return this.each(function() {
        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin(this, args));  //吃參數
        }
        else if ($.isFunction(Plugin.prototype[args[0]]))
        {
            $.data(this, 'plugin_' + pluginName)[args[0]](args[1]);  //吃參數
        }
        else
        {
            console.log('wrong way to use this method:' + args[0]) ;
        }
    });
}

如此一來，假定你有一個套件需要執行

$(selecotr).plugin('doSomething') ;

你只要在prototype增加一個方法即可。

    Plugin.prototype.init = function () {
        //程式，寫這邊~
    };
    
    Plugin.prototype.doSomething = function () {
        //程式，寫這邊~
    };